<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>触摸滑动显示图片</title>
  <style>
    body,
    ul {
      margin: 0;
      padding: 0;
    }

    .swiper {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    .swiper ul {
      height: 100vh;
      display: flex;
      align-items: center;
      transform: translateZ(0);
    }

    .swiper ul li {
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      list-style: none;
    }

    .swiper ul li img {
      width: 80%;
      border-radius: 2vw;
    }

    .swiper .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }

    .swiper .bg img {
      width: 100%;
      height: 100%;
      filter: blur(2vw);
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="swiper">
      <div class="bg">
        <img src="./img/img1.jpg">
      </div>
      <ul>
        <li>
          <img src="./img/img1.jpg">
        </li>
        <li>
          <img src="./img/img2.jpg">
        </li>
        <li>
          <img src="./img/img3.jpg">
        </li>
        <li>
          <img src="./img/img4.jpg">
        </li>
      </ul>
    </div>
  </div>
  <script>
    var oUl = document.querySelector('ul');
    var aLi = document.querySelectorAll('li');
    var oSwiper = document.querySelector('.swiper');
    var bgImg = document.querySelector('.bg img');

    var data = {
      oUl: document.querySelector('ul'),
      aLi: document.querySelectorAll('li'),
      oSwiper: document.querySelector('.swiper'),
      bgImg: document.querySelector('.bg img'),
      time: '0.5s'
    };
    swiper(data);
    function swiper(data) {

      data.oUl.style.width = data.aLi.length + '00vw';

      data.oSwiper.addEventListener('touchstart', touch);
      data.oSwiper.addEventListener('touchmove', touch);
      data.oSwiper.addEventListener('touchend', touch);

      var x1, startX;
      function touch(ev) {
        ev = ev || window.event;
        // console.log(ev);
        switch (ev.type) {
          case 'touchstart':
            x1 = ev.changedTouches[0].clientX; // 获取触摸的位置(x1,y1)
            // startX = oUl['translateX'] || 0; // 获取ul的偏移值startX
            data.oUl.style.transition = '0s';
            startX = cssTransform(data.oUl, 'translateX');
            break;
          case 'touchmove':
            var x2 = ev.changedTouches[0].clientX;
            var nowX = startX + x2 - x1;
            cssTransform(data.oUl, 'translateX', nowX);
            // oUl['translateX'] = nowX;
            // oUl.style.transform = 'translateX(' + nowX + 'px)';
            // console.log('移动');
            break;
          case 'touchend':
            var offset = cssTransform(data.oUl, 'translateX');

            offset = Math.min(offset, 0);
            offset = Math.max(-data.aLi[0].offsetWidth * (data.aLi.length - 1), offset);

            var num = Math.round(offset / aLi[0].offsetWidth);

            var img = data.aLi[Math.abs(num)].querySelector('img');
            data.bgImg['src'] = img['src'];
            data.oUl.style.transition = data.time || '0.5s';
            cssTransform(data.oUl, 'translateX', num * data.aLi[0].offsetWidth);
            // console.log('抬起');
            break;
        }
      }

      function cssTransform(obj, attr, val) {
        if (!obj.ps) {
          obj.ps = {};
        }
        switch (arguments.length) {
          case 2:
            return obj.ps[attr] || 0;
            break;
          case 3:
            obj.ps[attr] = val;
            var str = '';
            for (var key in obj.ps) {
              switch (key) {
                case 'translate':
                case 'translateX':
                case 'translateY':
                case 'translateZ':
                  str += key + '(' + obj.ps[key] + 'px)';
                  break;
              }
            }
            obj.style.transform = str;
            break;
        }
      }

    }
  </script>
</body>

</html>